<template>
  <div>
    <zh-form ref="metaDataRef" :md="8" :lg="8" :xl="8"  :model="state.queryParams"  labelWidth="200">
      <zh-form-select
          prop="fileFieldId"
          :lazy="true"
          label="元数据"
          v-model="state.queryParams.fileFieldId"
          :fieldNames="{ label: 'fieldName', value: 'fieldId' }"
          :url="VITE_FILE_API_URL+'fileFieldParam0001'"         
          searchField="fieldName"
      ></zh-form-select>
      <zh-form-input prop="fieldKey" label="字段标识"  v-model="state.queryParams.fieldKey"
                     ></zh-form-input>
      <zh-form-input prop="fieldName" label="字段中文"  v-model="state.queryParams.fieldName"
                     ></zh-form-input>
      <zh-form-input prop="fieldValue" label="元数据值"  v-model="state.queryParams.fieldValue"
                     ></zh-form-input>
      <zh-form-query v-model="state.advanced"  :form-ref="metaDataRef" @queryClick="clearData"
                     :table-ref="metaTable"></zh-form-query>
    </zh-form>
    <zh-table
        ref="metaTable"
        title="元数据列表"
        :height="600"
        :url="VITE_FILE_API_URL+'fileManager0007'"
        :columns="state.tableColumn"
        :disabled="false"
        highlight-current-row
    >
      <template #op="{row}">
        <el-tooltip content="编辑" placement="top">
          <el-button :icon="Edit" link @click="edit(row)"></el-button>
        </el-tooltip>
      </template>
    </zh-table>
    <zh-dialog
        ref="metaInfoDialog"
        v-model="state.metaInfoVisible"
        title="元数据修改"
        width="20%"
        @confirm="saveMetaInfo">
      <zh-form :model="state.metaInfo" ref="queryFormRef"  :md="24" :lg="24" :xl="24" >
        <zh-form-input  prop="fieldKey" label="字段标识"  v-model="state.metaInfo.fieldKey" disabled
        ></zh-form-input>
        <zh-form-input prop="fieldName" label="字段中文"  v-model="state.metaInfo.fieldName" disabled
        ></zh-form-input>
        <zh-form-input prop="fieldValue" label="文件元数据值"  v-model="state.metaInfo.fieldValue" :disabled="props.disabled"
        ></zh-form-input>
      </zh-form>
    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="fileMetaData">
import {Edit} from '@element-plus/icons-vue'

const metaDataRef=ref();
const metaTable = ref<any>({});
const VITE_FILE_API_URL = import.meta.env.VITE_FILE_API_URL as string+'/doc/api/';

const props = defineProps({
  disabled: {
    type: Boolean,
    default: true,
  },
});
const state = reactive({
  metaInfoVisible:false,
  metaInfo:{},
  dictData:[],
  queryParams:{
    fileId:'',
  },
  tableColumn:[
    {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号'},
    {field: 'fieldKey', title: '字段标识', fixed: 'left', align: 'center', minWidth: 200},
    {field: 'fieldName', title: '字段中文', fixed: 'left', align: 'center', minWidth: 200},
    {field: 'fieldValue', title: '文件元数据值', fixed: 'left', align: 'center', minWidth: 200},
    {field: 'op', title: '操作',  align: 'center',fixed:'right',width:200,slots: {default: 'op'}},
  ]
})

//---------------------初始化---------------------
const params = {
  dictFields: 'flag',
};
$api.common.getBatchDict.post(params).then((res) => {
  state.dictData = res.result;
});


function setInitData(info) {
  metaDataRef.value?.resetFields();
  if (info) {
    state.queryParams.fileId=info.fileId;
  }
  metaTable.value.query();
}

function edit(row){
  state.metaInfoVisible=true
  state.metaInfo=row;
}

//修改元数据信息
function saveMetaInfo(){
  $api.common.fileSend.post('fileManager0008',state.metaInfo).then((res) => {
    state.metaInfoVisible=false;
    $messageBox.success('元数据信息保存成功', '提示');
    metaTable.value.refresh();
  }).catch(() => {
    $messageBox.error('元数据信息保存失败', '提示');
    state.metaInfoVisible=false;
  });

}

//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({setInitData});
</script>